<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz">
			<u-form-item class="diygw-col-24" label="上传图片" prop="upload">
				<u-upload width="160" height="160" maxCount="3" @on-success="uploadUpload" @on-remove="delUpload"
					action="http://26.244.151.47:8800/pet/upload" :file-list="uploadListDatas"> </u-upload>
			</u-form-item>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="宠物名字" prop="input">
					<u-input :focus="inputFocus" class="" placeholder="请输入宠物名称" v-model="input" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="宠物年龄" prop="sct">
					<u-input @click="showSct = true" class="" valueName="value" labelName="label" :list="sctDatas"
						placeholder="请选择" v-model="sct" type="select"></u-input>
					<u-select mode="single-column" valueName="value" labelName="label" :list="sctDatas"
						v-model="showSct" @confirm="changeSct"></u-select>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-24 text-clz"> 性别 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-around" wrapClass=" justify-around"
						activeColor="#f37b1d" v-model="radio" @change="changeRadio">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radioDatas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-14 text1-clz"> 种类 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio1">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio1" @change="changeRadio1">
						<u-radio shape="circle" v-for="(radioitem, radioindex) in radio1Datas" :key="radioindex"
							:name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>

			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-24 text3-clz"> 是否已绝育 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio3">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio3" @change="changeRadio3">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radio3Datas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-24 text2-clz"> 是否已注射疫苗 </view>
				<u-form-item labelWidth="auto" class="diygw-col-24" labelPosition="top" prop="radio2">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-end" wrapClass=" justify-end"
						activeColor="#f37b1d" v-model="radio2" @change="changeRadio2">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radio2Datas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-24 text4-clz"> 是否已驱虫 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio4">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio4" @change="changeRadio4">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radio4Datas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap">
				<view class="diygw-col-24 text5-clz"> 是否免费 </view>
				<u-form-item class="diygw-col-24" labelPosition="top" prop="radio5">
					<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between"
						activeColor="#f37b1d" v-model="radio5" @change="changeRadio5">
						<u-radio class="diygw-col-12" shape="circle" v-for="(radioitem, radioindex) in radio5Datas"
							:key="radioindex" :name="radioitem.value">
							{{ radioitem.label }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<u-form-item class="diygw-col-24" label="他的故事" prop="textarea">
					<u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="textarea"
						type="textarea"></u-input>
				</u-form-item>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex11-clz">
				<view class="flex diygw-col-24 button-clz">
					<button class="diygw-btn orange radius-xl flex-sub margin-xs button-button-clz" @click="next()">下一步</button>
				</view>
			</view>
		</view>

		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				uploadListDatas: [],
				uploadDatas: [],
				upload: '',
				inputFocus: false,
				input: '',
				showSct: false,
				age: 0,
				sctDatas: [{
						value: '100',
						label: '年龄不详'
					},
					{
						value: '0',
						label: '小于一岁'
					},
					{
						value: '1',
						label: '1岁'
					},
					{
						value: '2',
						label: '2岁'
					},
					{
						value: '3',
						label: '3岁'
					},
					{
						value: '4',
						label: '4岁'
					},
					{
						value: '5',
						label: '5岁'
					},
					{
						value: '6',
						label: '6岁'
					},
					{
						value: '7',
						label: '7岁'
					},
					{
						value: '8',
						label: '8岁'
					},
					{
						value: '9',
						label: '9岁'
					},
					{
						value: '10',
						label: '10岁'
					},
					{
						value: '11',
						label: '11岁'
					},
					{
						value: '12',
						label: '12岁'
					},
					{
						value: '13',
						label: '13岁'
					},
					{
						value: '14',
						label: '14岁'
					},
					{
						value: '15',
						label: '15岁'
					},
					{
						value: '16',
						label: '16岁'
					},
					{
						value: '17',
						label: '17岁'
					},
					{
						value: '18',
						label: '18岁'
					},
					{
						value: '19',
						label: '19岁'
					},
					{
						value: '20',
						label: '20岁'
					},
					{
						value: '21',
						label: '大于20岁'
					},
				],

				sct: '请选择',
				radioDatas: [{
						value: '1',
						label: '男孩',
						checked: true
					},
					{
						value: '2',
						label: '女孩',
						checked: false
					}
				],
				radio: '1',
				radio1Datas: [{
						value: '0',
						label: '狗狗',
						checked: true
					},
					{
						value: '1',
						label: '猫咪',
						checked: false
					},
					{
						value: '2',
						label: '其他',
						checked: false
					}
				],
				radio1: '0',
				radio2Datas: [{
						value: '1',
						label: '是',
						checked: true
					},
					{
						value: '0',
						label: '否',
						checked: false
					}
				],
				radio2: '1',
				radio3Datas: [{
						value: '1',
						label: '是',
						checked: true
					},
					{
						value: '0',
						label: '否',
						checked: false
					}
				],
				radio3: '1',
				radio4Datas: [{
						value: '1',
						label: '是',
						checked: true
					},
					{
						value: '0',
						label: '否',
						checked: false
					}
				],
				radio4: '1',
				radio5Datas: [{
						value: '1',
						label: '是',
						checked: true
					},
					{
						value: '2',
						label: '否',
						checked: false
					}
				],
				radio5: '1',
				textarea: '',
				datarows:{},
				img:'',
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			const token = uni.getStorageSync('token');
			if(token){
				this.setCurrentPage(this);
				if (option) {
					this.setData({
						globalOption: this.getOption(option)
					});
				}
				
				this.init();
			}else{
				uni.showToast({
					title: '请先登录',
					icon: 'error',
					duration: 2000
				});
				uni.switchTab({
					url:'/pages/user/index'
				})
			}

		},
		methods: {
			async init() {},
			changeUpload(lists) {
				console.log(lists[0]['response'])
				this.img = lists[0]['response']
				console.log(this.img)
				let datas = lists
					.filter((item) => {
						return item && item.url;
					})
					.map((item) => {
						return item.url;
					});
				this.uploadDatas = datas;
				this.uploadListDatas = datas.map((item) => {
					return {
						url: item
					};
				});
				this.upload = datas.join(',');
			},
			delUpload(index, lists) {
				this.changeUpload(lists);
			},
			uploadUpload(res, index, lists, name) {
				this.changeUpload(lists);
			},
			next(){
				const img = this.img
				console.log(img)
				const name = this.input;
				const age = this.age;
				const sex = this.radio==1?'男':'女';
				const type = this.radio1==0?'狗':this.radio1==1?'猫':'其他';
				const tags = this.radio3+this.radio2+this.radio4+this.radio5
				const tagsNumber = parseInt(tags, 2)
				const remark = this.textarea
				const data={
					'img':img,
					'petName':name,
					'age':age,
					'sex':sex,
					'petType':type,
					'tags':tagsNumber,
					'remark':remark
				}
				console.log(data);
 				uni.navigateTo({
 					url:`/pages/add/deliver/details?data=`+encodeURIComponent(JSON.stringify(data))
 				})
				
			},
			changeSct(evt) {
				evt.map((val, index) => {
					this.sct = val.label;
					this.age = val.value;
				});
			},
			changeRadio(evt) {},
			changeRadio1(evt) {},
			changeRadio2(evt) {},
			changeRadio3(evt) {},
			changeRadio4(evt) {},
			changeRadio5(evt) {}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		margin-left: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.text-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(100% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text1-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(58.3333333333% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text2-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(100% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text3-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(100% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text4-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(100% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text5-clz {
		margin-left: 30rpx;
		font-weight: bold;
		width: calc(100% - 30rpx - 10rpx) !important;
		font-family: 雅黑;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {}
</style>